<template>
  <el-breadcrumb class="breadcrumb" :separator-icon="ArrowRight">
    <el-breadcrumb-item>{{ home }}</el-breadcrumb-item>
    <el-breadcrumb-item class="last">{{ crumbs }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'

defineProps(['home', 'crumbs'])
</script>

<style lang="less" scoped>
.breadcrumb {
  display: flex;
  padding: 20px 0 30px;
  font-size: 12px;
  height: 17px;
}

.el-breadcrumb__item :deep(.el-breadcrumb__inner) {
  color: var(--color-text);
  font-weight: 400;
}

.el-breadcrumb__item .el-breadcrumb__inner:deep(.last) {
  color: var(--span-color-text) !important;
}
</style>
